<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		  <block slot="backText">返回</block>
		  <block slot="content">盘点明细</block>
		</cu-custom>
		<view class="padding solid">编号：{{code}}</view>
		<view class="flex flex-wrap justify-center">
			<view class="justify-center">
				<button class="cu-btn bg-red margin-tb-sm lg" @tap="scanCode">扫码盘点</button>
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(tabName,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
				{{tabName}}
			</view>
		</scroll-view>

		<view class="flex flex-wrap justify-center basis-xl">
			<view class="cu-list menu sm-border card-menu basis-xl" v-if="TabCur==0">
				<template v-if="willList.length>0">
					<view class="cu-item" v-for="item in willList">
					    <view class="content">
					        <text class="cuIcon-settings text-grey"></text>
					        <text class="text-grey"><text style="color:blue">{{item.equipmentName}}</text></text>
							<view style="display: flex">
								<view class="content">
									 <text class="text-grey">设备编号：{{item.equipmentCode}}</text>
								</view>
							</view>
							<view style="display: flex">
								<view class="content">
									 <text class="text-grey">任务状态：{{item.stateTxt}}</text>
								</view>
								<view class="action" @tap="openHandle(item.id)">
								    <button class="cu-btn round bg-olive shadow">
								    <text class="cuIcon-title"></text>盘亏</button>
								</view>
							</view>
					    </view>
					</view>
				</template>
				<template v-else>
				<view class="content" style="text-align: center;">
					<text>待盘点暂无数据</text>
				</view>
				</template>
			</view>
			<view class="cu-list menu sm-border card-menu basis-xl" v-if="TabCur==1">
				<template v-if="doneList.length>0">
					<view class="cu-item" v-for="item in doneList">
					    <view class="content">
					        <text class="cuIcon-settings text-grey"></text>
					        <text class="text-grey"><text style="color:blue">{{item.equipmentName}}</text></text>
							<view style="display: flex">
								<view class="content">
									 <text class="text-grey">设备编号：{{item.equipmentCode}}</text>
								</view>
							</view>
							<view style="display: flex">
								<view class="content">
									 <text class="text-grey">盘点状态：{{item.inventoryStateTxt}}</text>
								</view>
							</view>
							<view style="display: flex">
								<view class="content" style="color: green;">
									 <text class="text-green">盘点备注：{{item.descs||"无"}}</text>
								</view>
							</view>
					    </view>
					</view>
				</template>
				<template v-else>
				<view class="content" style="text-align: center;">
					<text>已盘点暂无数据</text>
				</view>
				</template>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="cu-modal" :class="showModel?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">盘亏处理</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<form>
						<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
						<view class="cu-form-group margin-top">
							<textarea maxlength="100" v-model="descs" placeholder="请输入盘亏备注"></textarea>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="handle">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inventoryId:'',
				code:'',
				willList:[],
				doneList:[],
				TabCur: 0,
				tabs:['待盘点','已盘点'],
				scrollLeft: 0,
				showModel:false,
				descs:'',
				id:''//当前选择的记录ID
			}
		},onLoad(options){
			this.inventoryId = options.inventoryId;
			this.code = options.code;
			
		},mounted(){
			this.getWillList();
			this.getDoneList();
		},computed:{
			userInfo(){
				let u = uni.getStorageSync("userInfo");
				if(u){
					let userInfo = JSON.parse(u);
					return userInfo;
				}
				uni.reLaunch({
					url: '../index/index'
				});
			}
		},methods:{
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				console.log("this.TabCur:" +this.TabCur)
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			openHandle(id){
				this.showModel = true;
				this.id = id;
			},
			handle(){
				this.$api.req.handleInventory({id:this.id,createUserId:this.userInfo.id,descs:this.descs},res=>{
					this.hideModal();
					this.getWillList();
					this.getDoneList();
				});
				
			},
			hideModal(){
				this.id = "";
				this.descs = ""
				this.showModel = false;
			},
			getWillList(){
				
				this.$api.req.getInventoryItemPageList({page:1,limit:1000,inventoryId:this.inventoryId,state:"will,will2"},res=>{
					
					this.willList = res.data;
					this.tabs[0] = "待盘点[" + this.willList.length + "]";
					
				});
			},
			getDoneList(){
				this.$api.req.getInventoryItemPageList({page:1,limit:1000,inventoryId:this.inventoryId,state:"done"},res=>{
					
					this.doneList = res.data;
					console.log("=====")
					this.tabs[1] = "已盘点[" + this.doneList.length + "]";
				});
			},
			scanCode(){
				let that = this;
				uni.scanCode({
					
					success: function (res) {
						that.$api.req.checkInventory({createUserId:that.userInfo.id,inventoryId:that.inventoryId,qrcode:res.result},res=>{
							if(res.code===0){
								
								uni.showToast({
									title:res.msg
								})
								that.getWillList();
								that.getDoneList();
							}else{
								uni.showToast({
									title:res.msg,
									icon:'error'
								})
							}
							
						});
					},fail:function(res){
						console.log("dsss"+JSON.stringify(res))
					}
				});
			}
		}
	}
</script>
	
<style>
	.wrap{
		background-color: #FAFBFC;
		min-height: 100vh;
	}
</style>